<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <van-button
          class="bg"
          size="mini"
          @click="isEditing = !isEditing"
          type="info"
          >{{ isEditing ? "取消" : "编辑" }}</van-button
        >
      </van-cell>
      <van-grid>
        <!-- 当index和curIdx相等时，补充一个用来做高亮的class -->
        <van-grid-item
          v-for="(channel, index) in channels"
          :key="channel.id"
          :class="{ red: index === curIdx }"
          @click="hClickMyChannel(index)"
        >
          <span>{{ channel.name }}</span>
          <van-icon
            v-if="isEditing && channel.id !== 0"
            name="cross"
            class="btn"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
          v-for="channel in recommendChannels"
          :key="channel.id"
          @click="hAddChannel(channel)"
        >
          <span>{{ channel.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, addChannels, delChannels } from '@/api/channel.js'
export default {
  name: 'ChannelEdit',
  // props: ['channels', 'curIdx'],
  props: {
    channels: {
      type: Array,
      required: true,
      // 如果是引用类型，则在设置默认值必须以函数的格式返回
      default: () => {
        return []
      }
    },
    curIdx: {
      type: Number,
      required: true,
      validator (val) {
        if (val < 0) {
          return false
        } else {
          return true
        }
      }
    }
  },
  data () {
    return {
      allChannels: [],
      isEditing: false
    }
  },
  // 根据已有数据生成新的数据 ---- 计算属性
  computed: {
    recommendChannels () {
      // 对所有频道的数据进行过滤：
      //   保存数据的条件是：当前这个频道没有在已有频道中出现
      const arr = this.allChannels.filter(channel => {
        // 因为后端传回来的数据是字符串不能用全等所以转换成数字类型
        const idx = this.channels.findIndex(item => Number(item.id) === Number(channel.id))
        if (idx === -1) {
          return true
        }
      })
      return arr
      // return this.allChannels.filter((item) => !this.channels.some(index => index.id === item.id))
    }
  },
  created () {
    this.loadAddChannels()
  },
  methods: {
    async loadAddChannels () {
      try {
        const { data: { data } } = await getAllChannels()
        // console.log(data)
        this.allChannels = data.channels
      } catch (err) {
        console.log(err)
      }
    },
    hClickMyChannel (index) {
      // 如果是编辑情况就是删除，若果是普通情况就跳转
      if (this.isEditing) {
        this.doDeleteChannel(index)
      } else {
        this.$emit('change-channel', index)
      }
    },
    // 对删除文章的封装
    async doDeleteChannel (index) {
      const id = this.channels[index].id
      try {
        await delChannels(id)
      } catch (err) {
        console.log(err)
      }
      // 如果删除的频道下标小于当前频道的下标
      // 要通知父组件修改active的值
      if (index < this.curIdx) {
        this.$emit('update-active')
      }
      if (index !== 0) {
        // 在channels减去当前这项 删除当前项(判断当前id不能为0的项可以删除，推荐不允许删除)
        this.channels.splice(index, 1)
        this.$toast.success('删除成功')
      }
    },
    async hAddChannel (channel) {
      try {
        await addChannels([channel])
        // 更新视图 我的频道添加一项
        this.channels.push(channel)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.channel {
  padding: 15px;
  font-size: 14px;
}
.btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
}
.red {
  color: red;
  font-weight: bold;
}
.bg {
  background-color: #fff;
  color: red;
  border-color: red;
}
</style>
